import React, { memo, useEffect } from "react"
import { shallowEqual, useDispatch, useSelector } from "react-redux"

import { HomeWrapper } from "./style"
import HomeBanner from "./c-cnps/home-banner"
import { fetchHomeDataAction } from "@/store/modules/home"
import HomeSectionV1 from "./c-cnps/home-section-v1"
import HomeSectionV2 from "./c-cnps/home-section-v2"
import { isEmptyObj } from "@/utils"
import HomeLongFor from "./c-cnps/home-longfor"
import HomeSectionV3 from "./c-cnps/home-section-v3"
import { changeHeaderConfigAction } from "@/store/modules/main"

const Home = memo(() => {
    const { goodPriceInfo, highScoreInfo, discountInfo, hotRecommendInfo, longForInfo, plusInfo } =
        useSelector(
            (state) => ({
                goodPriceInfo: state.home.goodPriceInfo,
                highScoreInfo: state.home.highScoreInfo,
                discountInfo: state.home.discountInfo,
                hotRecommendInfo: state.home.hotRecommendInfo,
                longForInfo: state.home.longForInfo,
                plusInfo: state.home.plusInfo,
            }),
            shallowEqual
        )

    /* 派发action事件 */
    const dispatch = useDispatch()
    useEffect(() => {
        dispatch(changeHeaderConfigAction({ isFixed: true, isHome: true }))
        dispatch(fetchHomeDataAction())
    }, [dispatch])

    return (
        <HomeWrapper>
            <HomeBanner />
            <div className="content">
                {isEmptyObj(discountInfo) && <HomeSectionV2 infoData={discountInfo} />}
                {isEmptyObj(hotRecommendInfo) && <HomeSectionV2 infoData={hotRecommendInfo} />}
                {isEmptyObj(goodPriceInfo) && <HomeSectionV1 infoData={goodPriceInfo} />}
                {isEmptyObj(highScoreInfo) && <HomeSectionV1 infoData={highScoreInfo} />}
                {isEmptyObj(longForInfo) && <HomeLongFor infoData={longForInfo} />}
                {isEmptyObj(highScoreInfo) && <HomeSectionV3 infoData={plusInfo} />}
            </div>
        </HomeWrapper>
    )
})

export default Home
